<%@ page import="com.ars.common.servlet.Login.getLogUser" %>
<%@ page import="com.ars.common.beans.User.User" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.text.SimpleDateFormat, java.util.Date" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>后台</title>
    <link href="${pageContext.request.contextPath}/admin/css/styles.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/admin/js/all.js"></script>
    <script src="${pageContext.request.contextPath}/JavaScript/vue.js"></script>
    <script src="${pageContext.request.contextPath}/JavaScript/JQuery.js"></script>
</head>
<body class="sb-nav-fixed">
<%@ include file="include/head.jsp" %>
<div id="layoutSidenav">
    <%@ include file="include/nav.jsp" %>
    <div id="layoutSidenav_content">
        <div class="container-fluid px-4">

            <form role="form" action="${pageContext.request.contextPath}/addActiveServlet" method="post" class="ActiveApp" onsubmit="return checkForm()">
                <div class="col-md-12 column">
                    <div class="row clearfix">
                        <div class="col-md-6 column">
                            活动名称<span id="NameNotNull" style="color: #ac2925"></span>
                            <input id="ActiveIdName" type="text" class="form-control" name="activeName" value="${activity.getName()}"/>
                            <span id="ActiveName" style="color: #ac2925"></span>
                        </div>

                        <%
                            // 获取当前时间
                            Date now = new Date();
                            // 格式化时间为yyyy-MM-dd'T'HH:mm，符合datetime-local输入框的格式
                            SimpleDateFormat dateTimeFormat = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm");
                            String formattedDateTime = dateTimeFormat.format(now);
                        %>

                        <div class="col-md-6 column">
                            开始时间<input type="datetime-local" class="form-control" name="beginTime" value="<%= formattedDateTime %>"/>
                        </div>
                    </div><br>
                    <div class="row clearfix">
                        <div class="col-md-6 column">
                            截止时间<input type="datetime-local" class="form-control" name="endTime" value="<%= formattedDateTime %>"/>
                            <span id="ActiveEndTime" style="color: #ac2925"></span>
                        </div>

                        <div class="col-md-6 column">
                            活动发布者<input type="text" class="form-control" name="Username" value="${LogUser.getName()}" disabled/>
                        </div>
                    </div><br>

                    <div class="row clearfix">
                        <div class="col-md-6 column">
                            发布者学号<input type="text" class="form-control" name="UserID" value="${LogUser.getUserID()}" disabled/>
                        </div>

                        <div class="col-md-6 column">
                            活动类型
                            <select type="text" class="form-control" name="ActivityType" id="Type">
                                <option value="-请选择活动类型--" disabled selected>--请选择活动类型--</option>
                                <option value="劳动实践">劳动实践</option>
                                <option value="创新创业">创新创业</option>
                                <option value="思想成长">思想成长</option>
                                <option value="文艺体育">文艺体育</option>
                                <option value="社会实践">社会实践</option>
                                <option value="工作履历">工作履历</option>
                            </select>
                        </div>

                    </div><br>

                    <%--					<div class="row clearfix">--%>
                    <%--						<div class="col-md-6 column">--%>
                    <%--							活动范围<select type="text" class="form-control" name="ActivePlace" value="" id="Range">--%>
                    <%--							<option>学院活动</option>--%>
                    <%--							<option>班级活动</option>--%>
                    <%--							</select>--%>
                    <%--						</div>--%>
                    <%--&lt;%&ndash;						<div class="col-md-6 column" v-show="isMajor">&ndash;%&gt;--%>
                    <%--&lt;%&ndash;							专业选择<select type="text" class="form-control" name="ActiveMajor" value="" id="Major">&ndash;%&gt;--%>
                    <%--&lt;%&ndash;							<option v-for="major in activeMajors" :value="major.value">&ndash;%&gt;--%>
                    <%--&lt;%&ndash;								{{ major.name }}&ndash;%&gt;--%>
                    <%--&lt;%&ndash;							</option>&ndash;%&gt;--%>
                    <%--&lt;%&ndash;						</select>&ndash;%&gt;--%>
                    <%--&lt;%&ndash;						</div>&ndash;%&gt;--%>
                    <%--					</div><br>--%>

                    <%--					<div class="row clearfix">--%>
                    <%--						<div class="col-md-6 column" v-show="isClass">--%>
                    <%--							班级选择<select type="text" class="form-control" name="ActiveNumber" value="" id="Class">--%>
                    <%--							<option v-for="number in activeNumbers" :value="number.value">--%>
                    <%--								{{ number.name }}--%>
                    <%--							</option>--%>
                    <%--						</select>--%>
                    <%--						</div>--%>

                    <%--					</div><br>--%>

                </div>
                <button type="submit" class="btn btn-success" id="sure">确定</button>
                <button type="reset" class="btn btn-primary">重置</button>
            </form>

        </div>
        <%@ include file="include/foot.jsp" %>
    </div>
</div>
<script>
    window.onload = function() {

        //不为空的标识加载
        var activeName = document.getElementsByName('activeName')[0];
        if (activeName.value === "") {
            $("#NameNotNull").html("*");
        }

        // 获取当前时间
        var now = new Date();

        // 格式化时间为YYYY-MM-DDTHH:MM，
        var year = now.getFullYear();
        var month = ('0' + (now.getMonth() + 1)).slice(-2);
        var day = ('0' + now.getDate()).slice(-2);
        var hours = ('0' + now.getHours()).slice(-2);
        var minutes = ('0' + now.getMinutes()).slice(-2);

        // 设置开始时间输入框的值
        document.getElementsByName('endTime')[0].value = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
    };

    var app = new Vue({
        el: ".ActiveApp",
        data: {
            majors:'',
            isClass: false,
            isMajor: false,
            selectedActiveType: '0',
            activeTypes: [
                { value: '0', name: '劳动实践' },
                { value: '1', name: '创新创业' },
                { value: '2', name: '思想成长' },
                { value: '3', name: '文艺体育' },
                { value: '4', name: '社会实践' },
                { value: '5', name: '工作履历' }
            ],
            activeMajors: [
                { value: '0', name: '计算机科学与技术' },
                { value: '1', name: '软件工程' },
                { value: '2', name: '物联网工程' },
                { value: '3', name: '计算机应用' }
            ],
        },

        computed: {
            // 将方法转换为计算属性
            activeNumbers: function() {
                var result = [];
                for (var i = 1; i <= 9; i++) {

                    result.push({
                        value: i,
                        name: this.majors + '专业' + i + '班'
                    });
                }
                return result;
            }
        },

        methods: {
            updateClassStatus: function(activePlace) {
                this.isMajor = (activePlace === "班级活动");
                // this.updateMajorStatus(activePlace);
            },
            updateMajorStatus: function(activeMajor) {
                this.isClass = true;
            },
            updateMajor: function(activeMajor) {
                this.majors = activeMajor;
            }
        }
    });

    //专业选择发生变化
    $('#Major').change(function() {
        const major = $(this).val();
        const majors = app.activeMajors[major].name;
        app.updateMajorStatus(major);
        app.updateMajor(majors);
    });


    $('#Range').change(function() {
        const activePlace = $(this).val();
        app.updateClassStatus(activePlace); // 更新 Vue 实例中的 isClass 数据
    });


    /*
    * 确认按钮监测输入数据是否完整
    * */


    function checkip(){
        var beginTime = document.getElementsByName('beginTime')[0].value;
        var endTime = document.getElementsByName('endTime')[0].value;
        var activeName = document.getElementsByName('activeName')[0].value;

        if (activeName == "") {
            $("#ActiveName").html("活动名称不能为空");
            return false;
        }

        if (new Date(endTime)  - new Date(beginTime) <= 36000) {
            $("#ActiveEndTime").html("截止时间必须大于开始时间一小时");

            return false;
        }
    }

    //输入活动名称事件
    // 使用 jQuery 的方式来获取和设置元素的值和 HTML 内容
    $("#ActiveIdName").on('input', function() {
        var activeName = $(this).val();
        if (activeName !== "") {
            $("#NameNotNull").html("");
        }
    });
    //鼠标离开输入框事件
    $("#ActiveIdName").blur(function() {
        var activeName = $(this).val();
        if (activeName == "") {
            $("#NameNotNull").html("*");
        }
    });



</script>
<script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/scripts.js"></script>
</body>
</html>